<template>
  <div class="calculate">
    <h2>Num:{{ n }}</h2>
    <h2>Getters范例:{{ m }}</h2>
    <h2>
      单数增减
      <button class="btn1" @click="increase">+</button>
      <button class="btn2" @click="decrease">-</button>
    </h2>
    <h2>
      <!-- v-model双向绑定 -->
      设置数字:<input type="number" v-model="userInput" />
      <button class="btn3" @click="confirm">点击确认</button>
    </h2>
  </div>
</template>

<script setup lang="ts" name="Calculate">
  //   引入store
  import { useCalculateStore } from "@/store/calculate";
  import { ref, computed } from "vue";
  //   调用对应的store并找一个东西来接
  const calculateStore = useCalculateStore();
  let userInput = ref<number | null>(null);
  let n = ref<number | null>(null);
  //计算属性可以使m保持响应性
  let m = computed(() => {
    return calculateStore.someGetter;
    //返回的是someGetter函数上的return 所以m的值为空
  });
  //按钮的函数
  function confirm() {
    //赋值操作
    n.value = userInput.value;
    //调用alculateStore上的setCounter函数返回的实参是用户输入的东西
    calculateStore.setCounter(userInput.value);
    // console.log(m.value);
  }
  //加减法操作
  function increase() {
    if (n.value !== null) {
      n.value += 1;
      calculateStore.setCounter(n.value);
    }
  }
  function decrease() {
    if (n.value !== null) {
      n.value -= 1;
      calculateStore.setCounter(n.value);
    }
  }
</script>

<style scoped>
  .calculate {
    background-color: rgb(240, 240, 240);
    padding: 10px 30px;
    width: fit-content;
    margin: 0 auto;
  }
  h2 {
    height: 40px;
    width: 400px;
  }
  .btn1,
  .btn2 {
    display: inline-flex;
    width: 50px;
    height: 35px;
    font-size: 20px;
    padding: 10px;
    margin-right: 20px;
    align-items: center;
    justify-content: center;
    background-color: rgb(31, 175, 197);
    color: aliceblue;
    border: 0;
    cursor: pointer;
    border-radius: 5px;
  }
  .btn1 {
    margin-left: 35px;
  }
  input {
    width: 100px;
    height: 25px;
    padding: 2px 5px;
    margin: auto 30px;
  }
  .btn3 {
    width: 100px;
    height: 35px;
    font-size: 15px;
    background-color: rgb(56, 185, 24);
    color: white;
    border: 0;
    border-radius: 5px;
  }
</style>
